{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/my_wallet.css">
<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
	.manage{
		font-size: 0.8rem;
		width: 20%;
		height: 1.1rem;
		line-height: 1.1rem;
		color: #FF6600;
		letter-spacing: 0;
		position: absolute;
		display: block;
		top:0.55rem;
		right: 3.2%;
		text-align: right;
	}
	.done{
		font-size: 0.8rem;
		width: 5rem;
		height: 1.1rem;
		line-height: 1.1rem;
		color: #FF6600;
		letter-spacing: 0;
		position: absolute;
		display: none;
		top:0.55rem;
		right: 3.2%;
		text-align: right;
	}
	.remove{
		background-image: url(/Public/Images/front/front_img/icon_fatie_shanchu@3x.png);
		width: 0.85rem;
		height: 0.85rem;
		background-size: .85rem .85rem;
		display: none;
		position: relative;
		right: -93.4%;
		top:-2.45rem;

	}
	.input_account{
		width: 100%;
		height: 2.5rem;
		background-color: #fff;
		color: #B4B4B4;
	}
	.account_input{
		width: 80%;
		height: 1.1rem;
		font-size: 0.8rem;
		color: #323232;
		position: relative;
		top:0.6rem;
		left:3.2%;
	}
	.ensure{
		width: 93.6%;
		height: 2.5rem;
		color: #fff;
		
		position: relative;
		top:2.0rem;
		left:3.2%;
		border-radius: 0.2rem;
		font-size: 0.9rem;
	}
	.grey{
		background-color: #B4B4B4;
	}
	.hav_line{
		background:#f3f3f3;
		height:0.5rem;
		width:100%;
	}
	.w{
		font-size: 12px;
	}
</style>
{/block}
{block name="content"}

<div class="title" style="border-bottom:0.025rem">
	
	<div class="go_back"></div>
	<p><strong>提现</strong></p>
	<span class="manage">管理</span>
	<span class="done">取消</span>
</div>

<div class="set_account">
	<ul >
		{if $alipay_list}
		{foreach from = $alipay_list  item = this}
		<li class="existed_account {if $this.alipay_id == $user_alipay_id}choose{/if}" data-alipay_id="{$this.alipay_id}">
		
			<img class="account_icon fix">
			<span class="account">{$this.alipay_account}</span>
			<div class="choosed"  {if $this.alipay_id == $user_alipay_id} style="display: block" {/if}></div>	<!--已选择的账号后面显示这个图标-->
			<div class="remove"></div>		<!--点击管理出现这个图标-->
		
		</li>
		{/foreach}
		{/if}
	</ul> 
	<div class="hav_line"></div>

	<div class="add_account">
		<div class="add_buttom">
			<span class="icon_tianjia"></span>
			<span class="tianjiashuoming">添加支付宝账户</span>
		</div>
	</div>

</div>

<div class="input_new_account" style="display:none">
	

	<div style="width:96.8%;height:1.5rem;background:#f3f3f3;font-size:0.65rem;color:#909090;line-height:1.5rem;padding-left:3.2%">
		请输入支付宝账户
	</div>
	
	<div class="input_account">
		<input type='tel' name="zhifubao_account" class="account_input" placeholder="手机号或邮箱">
	</div>

	<input type="submit" class="ensure grey" value="完成">

</div>

<div class="veri_sent">
	<span class="tanchuang_success"></span>
	<span class="w">验证码已发送</span>
</div>

<!--验证码错误弹框-->
<div class="veri_wrong">
	<span class="tanchuang_defeat"></span>
	<span class="w">验证码错误</span>
</div>

{/block}
{block name="js"}
{literal}
<script type="text/javascript">
	var is_click = false;
	//支付选中的对象
	var data_alipay_id ='';
	
	
	//删除账号
	$('.set_account').on('click','.remove',function(){
		var _this = $(this);
		if (is_click == true) return
			is_click =true;
		var alipay_id = $(this).parent('.existed_account').attr('data-alipay_id')
		console.log(alipay_id);
		layer.open({
			content: '您确定要删除吗？'
			,btn: ['确定', '取消']
			,yes: function(){
				$.ajax({
					type:'post',
					url:'/FrontUserCenter/del_alipay',
					data:{alipay_id:alipay_id},
					success:function (data) {
						if(data.code == 1){
							location.reload();
							$(this).parents('li').remove();
						}else{

						}
						is_click = false
					}
				})
			}
		});
		is_click = false;
	});

	//点击这一栏跳转到上个页面
	$('.set_account').on('click','.existed_account',function(){
		console.log('keyi');
		var _this = $(this);
		if($('.remove').is(":visible")) return
		if (is_click == true) return
		is_click = true;
		var alipay_id = _this.attr('data-alipay_id');
		console.log(alipay_id);
		$.ajax({
			type:'post',
			url:'/FrontUserCenter/set_alipay',
			data:{alipay_id:alipay_id},
			success:function (data) {
				if(data.code == 1){
					_this.siblings('li').find('.choosed').hide();
					_this.find('.choosed').show();
					_this.addClass('choose').siblings().removeClass('choose');
					if(!is_wechat()){
                        native_listen('back_reload');
                    }else{
                        history.go(-1);
                    }  
				}else{

				}
				is_click =false;
			}
		})
	});

	//点击添加支付宝账户
	$('.add_buttom').on('click',function(){
		$('.manage').hide();
		$('.done').hide();
		$('.set_account').hide();
		$('.input_new_account').show();
	});

	$('.account_input').bind('input propertychange',function(){
		$('.ensure').removeClass('grey');
		$('.ensure').addClass('orange');
		var number = $('.account_input').val();
		
		var length = number.length;
		console.log(number.length);
		if(length==0){
			$('.ensure').removeClass('orange');	
			$('.ensure').addClass('grey');
		}
	});

	//按钮橙色时可点击完成，验证支付宝账号，如果通过，返
	$('.input_new_account').on('click','.ensure.orange',function(){
		if(is_click == true) return;
		is_click =true;
		var alipay_account = $('.account_input').val();
		console.log(alipay_account);
		$.ajax({
			type:'post',
			url:'/FrontUserCenter/add_user_alipay',
			data:{alipay_account:alipay_account},
			success:function (data) {
				if(data.code == 1){
					$('.veri_sent').find('.w').html(data.msg);
					$('.veri_sent').fadeIn(1500);
					$('.veri_sent').fadeOut(1500);

					setTimeout(function () {
						$('ul').append('<li class="existed_account" data-alipay_id="'+data.id+'"><img class="account_icon fix"><span class="account">'+alipay_account+'</span><div class="choosed"></div><div class="remove"></div></li>');


						$('.input_new_account').hide();
						$('.set_account').show();
						$('.manage').show();
					},3000)

				}else{
					$('.veri_wrong').find('.w').html(data.msg);
					$('.veri_wrong').fadeIn(1500);
					$('.veri_wrong').fadeOut(1500);
				}

				is_click = false;
			}
		})







	});

	//点击管理
	$('.manage').on('click',function(){
		$('.choosed').hide();
		$('.manage').hide();
		$('.done').show();

		$('.set_account .remove').show();
	});
	//点击完成
	$('.done').on('click',function(){
		$('.remove').hide();
		$('.manage').show();
		$('.done').hide();
		// location.reload();
		$('.set_account .choose').find('.choosed').show();
	});
</script>
{/literal}
{/block}
